<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>


<div id="app">

  <!--使用组件标签完成组件的使用-->
<!--    <student name="jack" age="20" sex="男"></student>-->
<!--    <student name="xiaoming" age="21" sex="男"></student>-->
<!--    <student name="xiaohei" age="18" sex="男"></student>-->

<!--     父子组件的参数传递   父组件 => 子组件 -->
    <student v-for="student in students"  :name="student.name" :age="student.age" :sex = "student.sex" ></student>
</div>


<script>

    const student = {
        template:`
                <div>
                    <h3>{{title}}</h3>
                    <p>学生姓名:{{student.name}}</p>
                    <p>学生年龄:{{student.age}}</p>
                    <p>学生性别:{{student.sex}}</p>
               </div>
        `,
        data(){
            return {
                title:"学生信息展示",
                student:{
                    name:this.name,
                    age:this.age,
                    sex:this.sex
                }
            }
        },
        props:['name','age','sex']     //组件参数的接收  通过props接收的参数 相当于在data中定义的数据一样
    }

    let vm = new Vue({
        el:'#app',
        data:{
            students:[
                {
                  name:'jack',
                  age: 20,
                  sex:'男'
                },{
                    name:'xiaoming',
                    age: 21,
                    sex:'男'
                },{
                    name:'xiaohei',
                    age:18 ,
                    sex:'男'
                }
            ]
        },
        methods:{},
        components:{  // 组件的注册
            student
        }
      })
</script>

</body>
</html>